@import "../../themes/vars.less";

:global {
  .ant-card-body {
    padding: 14px 24px 0 24px;
  }
}

.infoCard {
  .cardHeader {
    float: left;
    position: relative;
    top: -20px;
    color: #FFFFFF;
    border-radius: 3px;

    &.yellow {
      background: linear-gradient(60deg, #ffa726, #fb8c00);
      box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);
    }

    &.pink {
      background: linear-gradient(60deg, #ec407a, #d81b60);
      box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4);
    }

    &.blue {
      background: linear-gradient(60deg, #26c6da, #00acc1);
      box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 188, 212, 0.4);
    }

    &.green {
      background: linear-gradient(60deg, #66bb6a, #43a047);
      box-shadow: 0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4);
    }

    h4 {
      color: #FFFFFF;
      padding: 10px 30px;
      font-size: 40px;
    }
  }

  .cardContent {
    text-align: right;

    .category {
      color: #999;
    }

    h3 {
      line-height: 0.5;
      font-size: 1.825em;
      font-weight: 300;
    }
  }

  .cardFooter {
    margin: 10px 0;
    padding-top: 5px;
    color: #999;
    font-size: 12px;
    position: relative;
    border-top: 1px solid #eee;
    width: 100%;
    float: left;
  }
}
